<template>
  <el-table class="table" :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#000000' }"
    :data="mainToplist" style="width: 100%" height="100%">
    <el-table-column fixed prop="realName" label="姓名" width="auto" />
    <el-table-column prop="clientNo" label="长者编号" width="180" />
    <el-table-column prop="age" label="年龄" width="auto" />
    <el-table-column prop="mobile" label="联系方式" width="auto" />
    <el-table-column prop="phoneNum" label="固定电话" width="auto" />
    <el-table-column prop="gender" label="性别" width="auto" />
    <el-table-column prop="birthday" label="出生日期" width="auto" />
    <el-table-column prop="censusAddress" label="户籍地址" width="500" />
    <el-table-column prop="status" label="是否健在" width="auto" />
    <el-table-column fixed="right" label="操作" width="160">
      <template #default>
        <el-button link type="primary" size="small">查看</el-button>
        <el-button link type="primary" size="small">视频通话</el-button>
        <el-button link type="primary" size="small">删除</el-button>
        <el-button link type="primary" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { useCounterStore } from '@/stores/index'
import { storeToRefs } from "pinia";

const storeMenu = useCounterStore()
const { elderListData } = storeToRefs<any>(storeMenu)
const mainToplist = ref<any>([])
watch(elderListData, (newValue, oldValue) => {
  nextTick(() => {
    mainToplist.value = newValue
  })
}, {
  immediate: true,
  deep: true,
})
onMounted(() => {
  storeMenu.getElderList();
});
</script>

<style scoped>
.el-table{
  
}
</style>
